<template>
  <view class="page-container w-[750rpx] bg-gray-50 min-h-screen mx-auto">
    <backView />
    <!-- 页面标题 -->
    <view class="page-header bg-gradient-to-r from-green-500 to-green-600 text-white p-[30rpx] shadow-md relative">
      <text class="text-[32rpx] font-bold text-center block">检查记录</text>
    </view>

    <!-- 搜索栏 -->
    <!-- <view class="search-bar bg-white m-[24rpx] p-[24rpx] rounded-[20rpx] shadow-md">
      <view class="flex gap-[16rpx]">
        <nut-input 
          v-model="searchForm.name" 
          placeholder="搜索姓名" 
          class="flex-1 rounded-[12rpx] border border-gray-200" 
        />
        <nut-input 
          v-model="searchForm.orgName" 
          placeholder="搜索医院" 
          class="flex-1 rounded-[12rpx] border border-gray-200" 
        />
        <nut-button 
          type="primary" 
          class="bg-gradient-to-r from-green-500 to-green-600 border-0 rounded-[12rpx] shadow"
          @click="searchRecords"
        >
          搜索
        </nut-button>
      </view>
    </view> -->

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container flex justify-center items-center py-[100rpx]">
      <view class="flex flex-col items-center">
        <view class="animate-spin rounded-full h-[80rpx] w-[80rpx] border-t-2 border-b-2 border-green-500 mb-[20rpx]"></view>
        <text class="text-[32rpx] text-gray-500">加载中...</text>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else-if="records.length === 0" class="empty-container flex flex-col justify-center items-center py-[100rpx] px-[40rpx]">
      <view class="bg-gray-100 rounded-full p-[40rpx] mb-[32rpx]">
        <text class="text-[72rpx]">🏥</text>
      </view>
      <text class="text-[32rpx] text-gray-700 font-medium mb-[32rpx] text-center">暂无检查记录</text>
      <nut-button 
        type="primary" 
        class="bg-gradient-to-r from-green-500 to-green-600 border-0 rounded-[12rpx] shadow px-[60rpx]"
        @click="goAdd"
      >
        添加第一条
      </nut-button>
    </view>

    <!-- 记录列表 -->
    <view v-else class="timeline-container px-[24rpx] pb-[60rpx] relative">
  <!-- 时间轴主线 - 使用渐变和动画效果 -->
  <view class="timeline-line absolute left-[100rpx] top-0 bottom-0 w-[6rpx] bg-gradient-to-b from-transparent via-green-400 to-transparent z-0 overflow-hidden">
    <view class="absolute top-0 left-0 w-full h-[40rpx] bg-green-400 animate-[pulse_3s_infinite]"></view>
  </view>
  
  <view v-for="(record, index) in records" :key="record.id" class="timeline-item relative mb-[60rpx] pl-[140rpx]">
    <!-- 时间轴节点 - 3D效果 -->
    <view class="timeline-dot absolute left-[84rpx] top-[30rpx] w-[32rpx] h-[32rpx] rounded-full bg-gradient-to-br from-green-400 to-green-600 border-4 border-white shadow-[0_0_0_4px_rgba(39,197,48,0.3)] z-10 flex items-center justify-center animate-[pulseDot_2s_infinite]">
      <view class="dot-inner w-[12rpx] h-[12rpx] rounded-full bg-white"></view>
      <view class="absolute top-0 left-0 w-full h-full rounded-full bg-green-400 opacity-0 animate-[ripple_2s_infinite]"></view>
    </view>
    
    <!-- 时间轴连接线 - 增加渐变效果 -->
    <view class="timeline-connector absolute left-[116rpx] top-[46rpx] w-[24rpx] h-[2rpx] bg-gradient-to-r from-green-500 to-gray-200 z-10"></view>
    
    <!-- 时间标签 -->
    <view class="time-label absolute left-0 top-[20rpx] w-[80rpx] text-center">
      <text class="time-day block text-[42rpx] font-bold text-green-600 leading-none">{{ formatDay(record.examDate) }}</text>
      <text class="time-month block text-[24rpx] font-semibold text-green-700 mt-[-4rpx]">{{ formatMonth(record.examDate) }}</text>
      <text class="time-year block text-[20rpx] text-gray-500 font-medium mt-[-4rpx]">{{ formatYear(record.examDate) }}</text>
    </view>
    
    <!-- 主要内容卡片 - 添加3D效果和深度 -->
    <view 
      class="content-card bg-white rounded-[24rpx] shadow-[0_10rpx_30rpx_rgba(0,0,0,0.08)] overflow-hidden border border-gray-100 transition-all duration-300 transform hover:translate-y-[-5rpx] hover:shadow-[0_15rpx_40rpx_rgba(39,197,48,0.15)]"
      @click="toggleDetail(record.id)"
    >
      <view class="main-info p-[30rpx] transition-colors duration-300 relative">
        <!-- 装饰元素 -->
        <view class="absolute top-0 left-0 w-[12rpx] h-full bg-gradient-to-b from-green-300 to-green-500"></view>
        
        <view class="flex items-start justify-between pl-[16rpx]">
          <!-- 医院信息 -->
          <view class="hospital-info flex-1">
            <text class="hospital-name block text-[32rpx] text-gray-800 font-bold mb-[16rpx]">{{ record.examOrg }}</text>
            <view class="department-badge bg-gradient-to-r from-blue-500 to-blue-600 px-[20rpx] py-[6rpx] rounded-[16rpx] inline-block shadow-sm">
              <text class="department-text text-white text-[24rpx] font-bold">{{ record.examSugg }}</text>
            </view>
          </view>
          
          <!-- 患者姓名和展开按钮 -->
          <view class="flex items-center">
            <text class="patient-name text-[28rpx] text-gray-700 font-bold mr-[12rpx]">{{ record.name }}</text>
            <view class="expand-icon transform transition-transform duration-300" :class="{ 'rotate-180': expandedItems.includes(record.id) }">
              <IconFont name="icon-arrow-down" class="text-[28rpx] text-gray-500" />
            </view>
          </view>
        </view>
        
        <!-- 简要症状信息 -->
        <view v-if="record.symptom || record.phySign" class="brief-symptoms mt-[20rpx] pl-[16rpx] pt-[12rpx] border-t border-gray-100">
          <view class="flex items-start">
            <view class="symptom-icon w-[36rpx] h-[36rpx] bg-green-100 rounded-full flex items-center justify-center mr-[12rpx]">
              <text class="text-[24rpx]">📋</text>
            </view>
            <text class="brief-text text-[24rpx] text-gray-600">{{ record.symptom || '' }}{{ record.symptom && record.phySign ? ' | ' : '' }}{{ record.phySign || '' }}</text>
          </view>
        </view>
      </view>

      <!-- 详细信息（可折叠） -->
      <view v-show="expandedItems.includes(record.id)" class="detail-section bg-gray-50 border-t border-gray-200">
        <view class="detail-content p-[30rpx]">
          <!-- 详细信息 -->
          <!-- <view class="details-list flex flex-col gap-[20rpx]">
            <view v-if="record.diagDsc" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">📋</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">诊断</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.diagDsc }}</text>
              </view>
            </view>

            <view v-if="record.symptom" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">💊</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">症状</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.symptom }}</text>
              </view>
            </view>

            <view v-if="record.phySign" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">🌡️</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">体征</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.phySign }}</text>
              </view>
            </view>

            <view v-if="record.detail" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">📄</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">其他</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.detail }}</text>
              </view>
            </view>

            <view v-if="record.note" class="detail-item flex items-start gap-[16rpx] p-[16rpx] bg-white rounded-[16rpx] shadow-sm">
              <view class="detail-icon w-[40rpx] h-[40rpx] bg-green-100 rounded-full flex items-center justify-center text-[26rpx]">📝</view>
              <view class="flex-1">
                <text class="detail-label block text-[24rpx] text-gray-500 font-medium">备注</text>
                <text class="detail-text block text-[26rpx] text-gray-800 font-medium mt-[4rpx]">{{ record.note }}</text>
              </view>
            </view>
          </view> -->

          <!-- 操作按钮 -->
          <view class="action-buttons mt-[30rpx] flex gap-[20rpx]">
            <nut-button 
              size="small" 
              class="flex-1 rounded-[16rpx] font-bold text-[26rpx] bg-gradient-to-r from-green-500 to-green-600 border-0 shadow-md"
              @click.stop="goEdit(record.id)"
            >
              <template #icon>
                <IconFont name="edit" class="text-[24rpx] mr-[8rpx]" />
              </template>
              编辑
            </nut-button>
            <nut-button 
              size="small" 
              class="flex-1 rounded-[16rpx] font-bold text-[26rpx] bg-gradient-to-r from-red-500 to-red-600 border-0 shadow-md"
              @click.stop="deleteRecord(record.id)"
            >
              <template #icon>
                <IconFont name="del" class="text-[24rpx] mr-[8rpx]" />
              </template>
              删除
            </nut-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

    <!-- 分页 -->
    <view v-if="total > pageSize" class="pagination-container flex justify-center py-[32rpx]">
      <nut-pagination 
        v-model="currentPage" 
        :total="total" 
        :page-size="pageSize" 
        @change="onPageChange" 
        class="custom-pagination"
      />
    </view>

    <!-- 悬浮添加按钮 -->
    <view class="fab-container fixed bottom-[48rpx] right-[48rpx] z-50">
      <nut-button 
        type="success" 
        class="!w-[90rpx] !h-[90rpx] !min-w-[90rpx] !min-h-[90rpx] rounded-full bg-gradient-to-br from-green-500 to-green-600 shadow-lg transition-transform duration-300 hover:scale-110"
        @click="goAdd"
      >
        <template #icon>
          <IconFont name="uploader" size="30" class="text-white" />
        </template>
      </nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import { request } from '@/service/request'
import { IconFont } from '@nutui/icons-vue-taro'
import { localStg } from '@/utils'
import backView from '@/components/backView.vue'

const loading = ref(false)
const records = ref<any[]>([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const expandedItems = ref<string[]>([])

const searchForm = reactive({
  name: '',
  recordid: '',
  orgName: ''
})

onMounted(() => {
  const obj = localStg.get("demographicInfo");
  if(obj){
    searchForm.recordid = obj.recordid;
  }
  loadRecords()
})

async function loadRecords() {
  loading.value = true
  try {
    const params = {
      page: currentPage.value,
      size: pageSize.value,
      ...searchForm
    }
    
    const result = await request.get<any>('/health_records/health_exam/healthExamIndexInfo/list', params, {
      useErrMsg: true
    })
    
    if (result.success) {
      records.value = result.success.records || []
      total.value = result.success.total || 0
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    Taro.showToast({ title: '加载数据失败', icon: 'error' })
  } finally {
    loading.value = false
  }
}

function searchRecords() {
  currentPage.value = 1
  loadRecords()
}

function onPageChange(page: number) {
  currentPage.value = page
  loadRecords()
}

function formatDate(dateStr: string) {
  if (!dateStr) return ''
  return new Date(dateStr).toLocaleDateString('zh-CN')
}

function formatDay(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.getDate().toString()
}

function formatMonth(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const month = date.getMonth() + 1
  return month.toString() + '月'
}

function formatYear(dateStr: string) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.getFullYear().toString()
}

function toggleDetail(id: string) {
  const index = expandedItems.value.indexOf(id)
  if (index > -1) {
    expandedItems.value.splice(index, 1)
  } else {
    expandedItems.value.push(id)
  }
}

function goAdd() {
  Taro.navigateTo({
    url: '/pages/historys/health-exam-record/add'
  })
}

function goView(id: string) {
  Taro.navigateTo({
    url: `/pages/historys/health-exam-record/view?id=${id}`
  })
}

function goEdit(id: string) {
  Taro.navigateTo({
    url: `/pages/historys/health-exam-record/edit?id=${id}`
  })
}

async function deleteRecord(id: string) {
  try {
    const result = await Taro.showModal({
      title: '确认删除',
      content: '确定要删除这条记录吗？',
      confirmText: '删除',
      cancelText: '取消'
    })
    
    if (result.confirm) {
      await request.delete(`/health_records/health_exam/healthExamIndexInfo/delete?id=${id}`, {}, {
        useErrMsg: true
      })
      
      Taro.showToast({ title: '删除成功', icon: 'success' })
      loadRecords()
    }
  } catch (error) {
    console.error('删除失败:', error)
    Taro.showToast({ title: '删除失败', icon: 'error' })
  }
}
</script>

<style>
/* 自定义分页器样式 */
.custom-pagination .nut-pagination-item {
  border-radius: 12rpx !important;
  border: 1rpx solid #e5e7eb !important;
}

.custom-pagination .nut-pagination-item.active {
  background: linear-gradient(to right, #27c530, #22a825) !important;
  color: white !important;
  border: none !important;
}

/* 加载动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 卡片悬停效果 */
.content-card {
  transition: all 0.3s ease;
}
</style>